<template>
  <div class="payment-page">
    <el-card class="payment-card">
      <template #header>
        <h2>订单支付</h2>
      </template>

      <div class="order-info">
        <div class="info-item">
          <span class="label">订单号：</span>
          <span>{{ order.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">商品名称：</span>
          <span>{{ order.courseName }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付金额：</span>
          <span class="amount">¥{{ order.amount }}</span>
        </div>
      </div>

      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="paymentMethod">
          <el-radio label="alipay">
            <img src="@/assets/alipay.png" class="payment-icon" />
            支付宝
          </el-radio>
          <el-radio label="wechat">
            <img src="@/assets/wechat.png" class="payment-icon" />
            微信支付
          </el-radio>
        </el-radio-group>
      </div>

      <el-button
        type="primary"
        :loading="paying"
        @click="handlePayment"
      >
        立即支付
      </el-button>
    </el-card>

    <el-dialog
      v-model="qrCodeVisible"
      title="扫码支付"
      width="300px"
      center
    >
      <div class="qr-code-container">
        <img :src="qrCodeUrl" class="qr-code" />
        <p>请使用{{ paymentMethod === 'alipay' ? '支付宝' : '微信' }}扫码支付</p>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderDetails, createPayment, checkPaymentStatus } from '@/api/payment'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const order = ref({})
const paymentMethod = ref('alipay')
const paying = ref(false)
const qrCodeVisible = ref(false)
const qrCodeUrl = ref('')

let statusCheckInterval

const loadOrderDetails = async () => {
  try {
    const { data } = await getOrderDetails(route.params.orderId)
    order.value = data
  } catch (error) {
    ElMessage.error('获取订单信息失败')
  }
}

const handlePayment = async () => {
  paying.value = true
  try {
    const { data } = await createPayment({
      orderId: order.value.id,
      method: paymentMethod.value
    })
    qrCodeUrl.value = data.qrCode
    qrCodeVisible.value = true
    startStatusCheck()
  } catch (error) {
    ElMessage.error('创建支付订单失败')
  } finally {
    paying.value = false
  }
}

const startStatusCheck = () => {
  statusCheckInterval = setInterval(async () => {
    try {
      const { data } = await checkPaymentStatus(order.value.id)
      if (data.status === 'PAID') {
        clearInterval(statusCheckInterval)
        ElMessage.success('支付成功')
        router.push('/student/my-courses')
      }
    } catch (error) {
      console.error('检查支付状态失败:', error)
    }
  }, 3000)
}

onMounted(() => {
  loadOrderDetails()
})

onUnmounted(() => {
  if (statusCheckInterval) {
    clearInterval(statusCheckInterval)
  }
})
</script>

<style scoped>
.payment-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.payment-card {
  width: 100%;
  max-width: 500px;
}

.order-info {
  margin-bottom: 30px;
}

.info-item {
  margin: 10px 0;
}

.label {
  color: #606266;
  margin-right: 10px;
}

.amount {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.payment-methods {
  margin: 20px 0;
}

.payment-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.qr-code-container {
  text-align: center;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
}
</style>